<template>
  <div class="project-static-page">
    <Top />
    <el-row :gutter="20" style="margin-top: 25px;margin-bottom: 25px">
      <el-col :span="12">
        <Top3 />
      </el-col>
      <el-col :span="12">
        <Top2 />
      </el-col>
    </el-row>
    <el-row :gutter="20" >
      <el-col :span="12">
        <div class="card card2">
          <div class="title">
            单位参会率
          </div>
          <v-chart style="width: 100%;height: 330px" :option="lineOption1" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card card2">
          <div class="title">
            每月参会专家分析
          </div>
          <v-chart style="width: 100%;height: 330px" :option="barOption1" />
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 25px;margin-bottom: 25px">
      <el-col :span="12">
        <div class="card card2">
          <div class="title">
            会议节约资金
          </div>
          <v-chart style="width: 100%;height: 330px" :option="lineOption2" />
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card card2">
          <div class="title">
            每月参会单位分析
          </div>
          <v-chart style="width: 100%;height: 330px" :option="barOption2" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { http } from '@/api'
import Top from './top'
import Top2 from './top2'
import Top3 from './top3'
import * as echarts from 'echarts'
import { getName,  MeetingType } from '@/dict'

export default {
  name: 'Home',
  components: {
    Top,
    Top2,
    Top3
  },
  data() {
    return {
      lineOption1: {},
      lineOption2: {},
      barOption1: {},
      barOption2: {}
    }
  },
  created() {
      http.projectStatic.meetingJoinRate().then(res => {
        let date = []
        let name = []
        let numlist = [[],[],[],[]]
        console.log(res.data);
        res.data.forEach((el,i) => {
            date.push(el.time)
            name = []
            el.investor.forEach((el2,n) => {
                name.push(getName(el2.meetingType, MeetingType))
                console.log(n);
                numlist[n].push(el2.sum)
            });
        });
          this.lineOption1 = {
              legend: {
                  show: true,
                  orient: 'horizontal',
                  icon: 'rect',
                  left: 'center',
                  top: 0,
                  itemGap: 20,
                  itemWidth: 20,
                  itemHeight: 2,
                  textStyle: {
                      color: '#282D32',
                      fontSize: 14,
                      fontWeight: 'bold'
                  }
              },
              grid: {
                  top: 40,
                  left: 32,
                  right: 32,
                  bottom: 0,
                  containLabel: true
              },
              color:['#2251F8','#65DD62','#FF9256','#FA0707'],
              tooltip: {
                  show: true,
                  trigger: 'axis'
              },
              xAxis: {
                  type: 'category',
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  },
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  axisTick: {
                      show: false
                  },
                  data: date
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  splitLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  }
              },
              series: [
              ]
          }
          const serieslist = []
          console.log(numlist);
          name.forEach((e ,i) => {
            serieslist.push(
                {
                      name: e,
                      data: numlist[i],
                      type: 'line',
                      showSymbol: false,
                      barWidth: 16
                  },
            )
          });
          this.lineOption1.series = serieslist
      })
      http.projectStatic.meetingJoinUser().then(res => {
          this.barOption1 = {
              legend: {
                  show: false,
                  orient: 'horizontal',
                  icon: 'rect',
                  right: 10,
                  top: 0,
                  itemGap: 20,
                  textStyle: {
                      color: '#282D32',
                      fontSize: 14,
                      fontWeight: 'bold'
                  }
              },
              grid: {
                  top: 40,
                  left: 32,
                  right: 32,
                  bottom: 0,
                  containLabel: true
              },
              tooltip: {
                  show: true,
                  trigger: 'axis'
              },
              xAxis: {
                  type: 'category',
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  },
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  axisTick: {
                      show: false
                  },
                  data: res.data.map(el =>  {
                      return el.time
                  })
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  splitLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  }
              },
              series: [
                  {
                      name: '每月参会专家分析',
                      data:  res.data.map(el =>  {
                          return el.expertsSum
                      }),
                      type: 'bar',
                      itemStyle: {
                          color: new echarts.graphic.LinearGradient(
                              0, 0, 0, 1, [{
                                  offset: 0,
                                  color: '#FF827A'
                              },
                                  {
                                      offset: 0.5,
                                      color: '#FFA825'
                                  },
                                  {
                                      offset: 1,
                                      color: '#ffffff'
                                  }
                              ]
                          ),
                          borderRadius: 11,
                      },
                      barWidth: 22
                  }
              ]
          }
      })
      http.projectStatic.meetingJoinMoney().then(res => {
          this.lineOption2 = {
              legend: {
                  show: false,
                  orient: 'horizontal',
                  icon: 'rect',
                  right: 10,
                  top: 0,
                  itemGap: 20,
                  textStyle: {
                      color: '#282D32',
                      fontSize: 14,
                      fontWeight: 'bold'
                  }
              },
              grid: {
                  top: 40,
                  left: 32,
                  right: 32,
                  bottom: 0,
                  containLabel: true
              },
              tooltip: {
                  show: true,
                  trigger: 'axis'
              },
              xAxis: {
                  type: 'category',
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  },
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  axisTick: {
                      show: false
                  },
                  data: res.data.map(el => el.time)
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  splitLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  }
              },
              series: [
                  {
                      name: '会议节约资金',
                      data:res.data.map(el => el.sum),
                      type: 'line',
                      lineStyle: {
                          width: 6
                      },
                      showSymbol: false,
    
                      itemStyle: {
                          color: '#2251F8'
                      },
                      barWidth: 16
                  }
              ]
          }
      })
      http.projectStatic.meetingJoinDept().then(res => {
          this.barOption2 = {
              legend: {
                  show: false,
                  orient: 'horizontal',
                  icon: 'rect',
                  right: 10,
                  top: 0,
                  itemGap: 20,
                  textStyle: {
                      color: '#282D32',
                      fontSize: 14,
                      fontWeight: 'bold'
                  }
              },
              grid: {
                  top: 40,
                  left: 32,
                  right: 32,
                  bottom: 0,
                  containLabel: true
              },
              tooltip: {
                  show: true,
                  trigger: 'axis'
              },
              xAxis: {
                  type: 'category',
                  axisLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  },
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  axisTick: {
                      show: false
                  },
                  data: res.data.map(el => el.time)
              },
              yAxis: {
                  type: 'value',
                  axisLabel: {
                      color: 'rgba(43,48,52,0.4)',
                      fontSize: 12
                  },
                  splitLine: {
                      lineStyle: {
                          color: 'rgba(238, 238, 238, 1)'
                      }
                  }
              },
              series: [
                  {
                      name: '每月参会单位分析',
                      data:  res.data.map(el => el.sum),
                      type: 'bar',
                      itemStyle: {
                          color: new echarts.graphic.LinearGradient(
                              0, 0, 0, 1, [{
                                  offset: 0,
                                  color: '#7ABFFF'
                              },
                                  {
                                      offset: 0.5,
                                      color: '#2587FF'
                                  },
                                  {
                                      offset: 1,
                                      color: '#7ABFFF'
                                  }
                              ]
                          ),
                          borderRadius: 11,
                      },
                      barWidth: 22
                  }
              ]
          }
      })
  },
  methods: {}
}
</script>

<style lang="scss">
.project-static-page {
    min-width: 1400px;
    .title {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 24px;
    }
    .card {
        background: #FFFFFF;
        box-shadow: 6px 6px 54px 1px rgba(0,0,0,0.05);
        border-radius: 14px 14px 14px 14px;
    }
    .card1 {
        width: 100%;
        height: 161px;
        padding: 16px;
        color: #202224;
        font-size: 16px;
        .name {
            font-weight: 400;
            line-height: 16px;
            margin-bottom: 11px;
        }
        .value {
            font-size: 36px;
            line-height: 44px;
        }
        .value-box {
            margin-bottom: 32px;

        }
        .unit {
            font-size: 16px;
            line-height: 16px;
        }
        .text {
            color: #12163C;
        }
        .color-l {
            color: #00B69B;
        }
        .icon {
            width: 60px;
            height: 60px;
        }
    }
    .card2 {
       padding: 20px;
    }
}
</style>
